<template>
  <div>
    <div class="gva-search-box">
      <p>节点名称：{{nodeName}}</p>
    </div>
    <div class="gva-table-box">
<!--      <div class="gva-btn-list">-->
<!--        <el-button-->
<!--            type="primary"-->
<!--            icon="plus"-->
<!--            @click="openDialog('addSoftware')"-->
<!--        >-->
<!--          新增-->
<!--        </el-button>-->
<!--      </div>-->
      <el-table
          :data="softwareData"
          @sort-change="sortChange"
          @selection-change="handleSelectionChange"
      >
        <el-table-column
            align="left"
            label="序号"
            min-width="60"
            type="index"
        />
        <el-table-column
            align="left"
            label="主进程名称"
            min-width="200"
            prop="main_process_name"
            sortable="custom"
        />

        <el-table-column
            align="left"
            label="运行路径"
            min-width="200"
            prop="program_url"
            sortable="custom"
        />

        <el-table-column
            align="left"
            label="类别"
            min-width="150"
            prop="category"
            sortable="custom"
        />

        <el-table-column
            align="left"
            label="描述"
            min-width="150"
            prop="description"
            sortable="custom"
        >
          <template #default="scope">
            <el-tooltip
                effect="dark"
                :content="scope.row.description"
                v-if="scope.row.description.length > 30"
            >
              <span>{{ scope.row.description.slice(0, 30) }}...</span>
            </el-tooltip>
            <span v-else>{{ scope.row.description }}</span>
          </template>
        </el-table-column>

        <!--        <el-table-column-->
<!--            align="left"-->
<!--            fixed="right"-->
<!--            label="操作"-->
<!--            width="150"-->
<!--        >-->
<!--          <template #default="scope">-->
<!--            <el-button-->
<!--                type="primary"-->
<!--                link-->
<!--                @click="goToSoftwareDetail(scope.row)"-->
<!--            >-->
<!--              详情-->
<!--            </el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
      <div class="gva-pagination">
        <el-pagination
            :current-page="page"
            :page-size="pageSize"
            :page-sizes="[10, 30, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
        />
      </div>
    </div>

    <!-- 新增软件的弹窗 -->
    <el-drawer
        v-model="drawerVisible"
        title="新增软件"
        direction="rtl"
        :size="drawerSize"
        @close="resetForm"
    >
      <el-form :model="form" label-width="120px">
        <el-form-item label="软件ID">
          <el-input v-model="form.software_id" placeholder="请输入软件ID" />
        </el-form-item>
        <el-form-item label="URL">
          <el-input v-model="form.program_url" placeholder="请输入URL地址" />
        </el-form-item>
        <el-form-item label="硬件ID">
          <el-input v-model="form.hardware_id" placeholder="硬件ID" />
        </el-form-item>
        <el-form-item label="类别">
          <el-select v-model="form.category" placeholder="请选择类别">
            <el-option label="系统工具" value="systool" />
            <!-- Add more options as needed -->
          </el-select>
        </el-form-item>
        <el-form-item label="主进程名称">
          <el-input v-model="form.main_process_name" placeholder="主进程名称" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.description" placeholder="软件描述" />
        </el-form-item>
        <el-form-item label="更新时间">
          <el-date-picker
              v-model="form.updateTime"
              type="datetime"
              placeholder="选择更新时间"
          />
        </el-form-item>
        <el-form-item label="记录时间">
          <el-date-picker
              v-model="form.recordTime"
              type="datetime"
              placeholder="选择记录时间"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="text-align: right;">
          <el-button @click="drawerVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {useRoute} from 'vue-router'
import {ElMessageBox, ElMessage} from 'element-plus'
import {getNodeSoftWare} from '@/api/node' // Assuming this API exists

const route = useRoute()

const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const softwareData = ref([])
const searchInfo = ref({})
const nodeID = ref('')
const nodeName = route.query.NodeName
const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}

const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}

const sortChange = ({prop, order}) => {
  if (prop) {
    searchInfo.value.orderKey = prop
    searchInfo.value.desc = order === 'descending'
  }
  getTableData()
}

const handleSelectionChange = (val) => {
  // Handle selection change logic
}

const drawerVisible = ref(false)
const form = ref({
  software_id: '',
  updateTime: '',
  program_url: '',
  recordTime: '',
  hardware_id: '',
  category: '',
  main_process_name: '',
  description: ''
})

const openDialog = (key) => {
  drawerVisible.value = true
}

const resetForm = () => {
  form.value = {
    software_id: '',
    updateTime: '',
    program_url: '',
    recordTime: '',
    hardware_id: '',
    category: '',
    main_process_name: '',
    description: ''
  }
}

const getTableData = async () => {
  try {

    nodeID.value = route.query.nodeId || '' // 从路由中获取 nodeId

    if (nodeID.value) {
      const response = await getNodeSoftWare(page.value, pageSize.value, nodeID.value) // 使用 nodeId 调用 API
      softwareData.value = response.data.SoftwareList // 将软件列表数据赋值给 table
      total.value = response.data.TotalCount || 0 // 从响应中获取总记录数
    } else {
      ElMessage.error('未找到 NodeId')
    }
  } catch (error) {
    ElMessage.error('数据加载失败')
  }
}


onMounted(() => {
  getTableData()
})
</script>

<style scoped>
.gva-search-box {
  margin-bottom: 20px;
}

.gva-table-box {
  margin-bottom: 20px;
}

.gva-btn-list {
  margin-bottom: 10px;
}

.gva-pagination {
  margin-top: 20px;
}
</style>
